import { defineComponent, ref, watchEffect, h } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';
import { useApiPagination } from '@wowon/hooks';

function useRequest(requestConfig) {
  return useApiPagination(requestConfig.query, requestConfig);
}

function useColumns(columns) {
  return columns.map((col) => {
    return h(
      ElTableColumn,
      {
        prop: col.dataIndex,
        label: col.title,
        width: col.width,
        key: col.dataIndex,
      },
      {
        default: (scope) => {
          // console.log(scope, col);
          // if (col.render) {
          //   return h('component', {
          //     is: col.render(scope.row),
          //   });
          // }
          return h('span', scope.row[col.dataIndex] || '-');
        },
      },
    );
  });
}

function useTable(request, columnNodes) {
  return h(ElTable, { data: request.data.value.list, stripe: true }, () => columnNodes);
}

export default defineComponent({
  name: 'SmartTable',
  inheritAttrs: false,
  props: {
    request: Object,
    rowKey: String,
    columns: Array,
  },
  setup(props, { expose, attrs }) {
    const { request: requestConfig, columns } = props;

    const request = useRequest(requestConfig);

    const columnNodes = useColumns(columns);

    return () => useTable(request, columnNodes);

    // return { tableData, loading, pagination };
  },
  // render() {
  //   // 动态生成列
  //   const columns = this.columns.map((col) => {
  //     return h(ElTableColumn, {
  //       prop: col.prop,
  //       label: col.label,
  //       width: col.width,
  //       // 自定义渲染逻辑
  //       scopedSlots: {
  //         default: (scope) => {
  //           if (col.render) {
  //             return h('component', {
  //               is: col.render(scope.row),
  //             });
  //           }
  //           return h('span', scope.row[col.prop] || '-');
  //         },
  //       },
  //     });
  //   });

  //   // 包裹加载状态
  //   return h(ElLoading, { props: { loading: this.loading } }, [
  //     h(
  //       ElTable,
  //       {
  //         attrs: { ...this.$attrs },
  //         props: { data: this.tableData },
  //       },
  //       columns,
  //     ),
  //   ]);
  // },
});
